<style lang="less" rel="stylesheet/less" type="text/less">
.ivu-table-body {
  overflow-x: auto !important;
}
</style>
<template >
  <div>
    <Table :columns="titleName" :data="data" :loading="loading" border stripe>
      <template slot-scope="{ row, index }" slot="price">
        <InputNumber :min="0" v-model="editPrice" v-if="editIndex === index" />
        <span v-else>{{ row.prices.price/100 }}元/次</span>
      </template>

      <template slot-scope="{ row, index }" slot="action">
        <div v-if="editIndex === index">
          <Button @click="handleSave(row)">保存</Button>
          <Button @click="editIndex = -1" style="margin-left:20px">取消</Button>
        </div>
        <div v-else>
          <Button @click="handleEdit(row, index)">操作</Button>
        </div>
      </template>
    </Table>
  </div>
</template>
<script>
import expandRow from "./table.vue";
export default {
  name: "PlanIndex",
  components: { expandRow },
  props: {
    loading: {
      type: Boolean,
      default() {
        return false;
      }
    },
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      token: null,
      editIndex: -1, // 当前聚焦的输入框的行数
      editPrice: null,
      titleName: [
        {
          title: "序号",
          width: 60,
          render: (h, { row }) => {
            const index = <div>{row._index + 1}</div>;
            return index;
          }
        },
        {
          title: "组",
          align: "center",

          render: (h, { row }) => {
            let groups = <div>face</div>;

            return groups;
          }
        },
        {
          title: "endpoint",
          align: "center",
          key: "name"
        },
        {
          title: "名称",
          align: "center",
          render: (h, { row }) => {
            const endpoint = <div>{row.prices.title}</div>;
            return endpoint;
          }
        },
        {
          title: "价格",
          align: "center",
          width: 130,
          slot: "price"
        },
        {
          title: "操作",
          slot: "action"
        }
      ]
    };
  },
  created() {
    this.token = sessionStorage.getItem("token");
  },
  methods: {
    handleEdit(row, index) {
      this.editPrice = row.prices.price / 100;
      this.editIndex = index;
    },
    handleSave(row) {
      this.$emit("update", row, this.editPrice);
      this.editIndex = -1;
    }
  }
};
</script>
